<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todo-list</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>

<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">添加list</button>
    </div>
    <ul>
        <todo-item v-for="(item,index) of list"
                   :key="index"
                   :content="item"
                   :index="index"
                   @delete='handleDelete'
        > <!-- 父子组件订阅传值 -->
        </todo-item>
    </ul>
</div>
<br/> <br/>


<script>
    //组件拆分
    Vue.component("todo-item", { //子组件
        props: ['content', "index"],//接收父组件值
        template: '<li @click="handleClick">{{content}}  {{index}}</li>',
        methods: {
            handleClick: function () {
                this.$emit('delete', this.index);//绑定子组件传值
            }
        }
    })

    new Vue({
        el: "#root",
        data: {
            inputValue: "today task",
            list: []
        },
        methods: {
            handleSubmit: function () {
                this.list.push(this.inputValue);
                this.inputValue = "";
            },
            handleDelete: function (index) {
                this.list.splice(index, 1);
            }
        }
    })


</script>
</body>
</html>